{% extends "main/base.html" %}
{% load static %}

{% block title %}主页{% endblock %}

{% block content %}
<div class="card card-body text-bg-danger mt-3 mb-3">
  <h4 class="card-text text-center">
    {% if user.identity %}
      传教尚未完成，同志仍需努力，
      <a href="{% url 'main:believer' user.id %}" class="text-decoration-none">
        <img src="{{ user.get_image_url }}" alt="{{ user.username }}" width="40px" height="40px" class="rounded">
        {{ user.get_badge_display|safe }}&nbsp;<span style="color: white;">{{ user.get_username_display_without_color|safe }}</span>
      </a>
      ！
    {% else %}
      要不要考虑加入老教，
      <a href="{% url 'main:believer' user.id %}" class="text-decoration-none"><strong>{{ user.username }}</strong></a>
      ，给祂注入一股新的年轻力量？
    {% endif %}
    <br>Lolders Never Die, Nanshin Forever!
  </h4>
</div>
<div class="row row-cols-2 mb-3">
  <div class="col">
    <div class="card">
      <h4 class="card-header">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-megaphone" viewBox="0 0 16 16">
          <path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49a68.14 68.14 0 0 0-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 74.663 74.663 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199V2.5zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0zm-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233c.18.01.359.022.537.036 2.568.189 5.093.744 7.463 1.993V3.85zm-9 6.215v-4.13a95.09 95.09 0 0 1-1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A60.49 60.49 0 0 1 4 10.065zm-.657.975 1.609 3.037.01.024h.548l-.002-.014-.443-2.966a68.019 68.019 0 0 0-1.722-.082z"></path>
        </svg>
        公告
      </h4>
      <div class="card-body overflow-y-auto" style="max-height: 50vh;">
        <div class="accordion" id="accordion">
          {% for notice in notices %}
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ forloop.counter }}"
                        aria-expanded="false" aria-controls="collapse{{ forloop.counter }}">
                  {{ notice.time|date:"Y年m月d日 H时i分s秒" }}&nbsp;{{ notice.title|safe }}
                </button>
              </h2>
              <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="heading{{ forloop.counter }}" data-bs-parent="#accordion">
                <div class="accordion-body">
                  {{ notice.content|safe }}
                </div>
              </div>
            </div>
            {% empty %}
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse"
                        aria-expanded="true" aria-controls="collapse">
                  现在 你访问了这个网站
                </button>
              </h2>
              <div id="collapse" class="accordion-collapse" aria-labelledby="heading" data-bs-parent="#accordion">
                <div class="accordion-body">
                  但是这里没有公告。
                </div>
              </div>
            </div>
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <h4 class="card-header">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-flag" viewBox="0 0 16 16">
          <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001M14 1.221c-.22.078-.48.167-.766.255-.81.252-1.872.523-2.734.523-.886 0-1.592-.286-2.203-.534l-.008-.003C7.662 1.21 7.139 1 6.5 1c-.669 0-1.606.229-2.415.478A21.294 21.294 0 0 0 3 1.845v6.433c.22-.078.48-.167.766-.255C4.576 7.77 5.638 7.5 6.5 7.5c.847 0 1.548.28 2.158.525l.028.01C9.32 8.29 9.86 8.5 10.5 8.5c.668 0 1.606-.229 2.415-.478A21.317 21.317 0 0 0 14 7.655V1.222z"></path>
        </svg>
        进度
      </h4>
      <div class="card-body overflow-y-auto" style="max-height: 50vh;">
        <div id="progress-0">
          <div class="card-text d-flex">
            <p class="me-auto">
              <strong>建站——那个伟大的开始！</strong>
            </p>
            <p class="ms-auto">
              开始于2024年01月16日
            </p>
          </div>
          <div class="progress" role="progressbar" aria-label="progress-0" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
          </div>
        </div>
        {% for progress in processes %}
        <hr>
        <div id="progress-{{ forloop.counter }}">
          <div class="card-text d-flex">
            <p class="me-auto">
              {{ progress.name }}
            </p>
            {% if progress.value < 100 %}
            <p class="mx-auto">
              {{ progress.value }}%
            </p>
            {% endif %}
            <p class="ms-auto">
              开始于{{ progress.start_date|date:"Y年m月d日" }}
            </p>
          </div>
          {% if progress.value == 100 %}
          <div class="progress" role="progressbar" aria-label="progress-{{ forloop.counter }}" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-striped bg-success" style="width: 100%"></div>
          </div>
          {% else %}
          <div class="progress" role="progressbar" aria-label="progress-{{ forloop.counter }}" aria-valuenow="{{ progress.value }}" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ progress.value }}%"></div>
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
<div class="alert alert-danger fixed-bottom" role="alert" id="larger-window" style="margin-bottom: 0;">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-window-plus" viewBox="0 0 16 16">
    <path d="M2.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM4 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path>
    <path d="M0 4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v4a.5.5 0 0 1-1 0V7H1v5a1 1 0 0 0 1 1h5.5a.5.5 0 0 1 0 1H2a2 2 0 0 1-2-2V4Zm1 2h13V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2Z"></path>
    <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-3.5-2a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1a.5.5 0 0 0-.5-.5Z"></path>
  </svg>
  <strong>建议使用更大的浏览器窗口访问本网站！`</strong>
</div>
{% endblock %}

{% block scripts %}
<script>
if (window.innerWidth >= 800 && window.innerHeight >= 600) {
    document.getElementById('larger-window').style.display = 'none';
}
</script>
{% endblock %}